/**
 * 导航栏交互模块
 * 处理导航栏响应式行为、滚动效果和移动端菜单
 */

/**
 * 初始化导航栏交互功能
 */
export function initNavbar() {
    // 响应式菜单切换
    const menuToggle = document.querySelector('.menu-toggle');
    const sidebar = document.querySelector('.sidebar');
    const overlay = document.querySelector('.overlay');
    
    if (menuToggle && sidebar) {
        menuToggle.addEventListener('click', toggleSidebar);
    }
    
    if (overlay) {
        overlay.addEventListener('click', toggleSidebar);
    }
    
    // 侧边栏项目激活状态
    highlightActiveNavItem();
    
    // 处理导航栏滚动效果
    handleNavbarScroll();
    
    // 添加返回顶部按钮功能
    initBackToTop();
}

/**
 * 切换侧边栏显示/隐藏
 */
function toggleSidebar() {
    const sidebar = document.querySelector('.sidebar');
    const overlay = document.querySelector('.overlay');
    const menuToggle = document.querySelector('.menu-toggle');
    
    if (sidebar) {
        sidebar.classList.toggle('sidebar-active');
        document.body.classList.toggle('sidebar-open');
    }
    
    if (overlay) {
        overlay.classList.toggle('active');
    }
    
    if (menuToggle) {
        menuToggle.classList.toggle('active');
    }
}

/**
 * 高亮当前页面的导航项
 */
function highlightActiveNavItem() {
    const currentPath = window.location.pathname;
    const navItems = document.querySelectorAll('.nav-item a, .sidebar-nav-item a');
    
    navItems.forEach(item => {
        const itemPath = new URL(item.href).pathname;
        
        // 检查当前路径是否匹配导航项的路径
        if (currentPath === itemPath || 
            (itemPath !== '/' && currentPath.startsWith(itemPath))) {
            item.classList.add('active');
            item.closest('.nav-item, .sidebar-nav-item').classList.add('active');
        } else {
            item.classList.remove('active');
            item.closest('.nav-item, .sidebar-nav-item').classList.remove('active');
        }
    });
}

/**
 * 处理导航栏滚动效果
 */
function handleNavbarScroll() {
    const navbar = document.getElementById('main-navbar');
    let lastScrollTop = 0;
    
    if (!navbar) return;
    
    window.addEventListener('scroll', function() {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        
        // 添加滚动时的导航栏样式
        if (scrollTop > 20) {
            navbar.classList.add('navbar-scrolled');
            navbar.classList.remove('navbar-transparent');
        } else {
            navbar.classList.remove('navbar-scrolled');
            navbar.classList.add('navbar-transparent');
        }
        
        // 处理向上滚动显示、向下滚动隐藏的行为
        if (scrollTop > lastScrollTop && scrollTop > 500) {
            // 向下滚动
            navbar.classList.add('navbar-hidden');
        } else {
            // 向上滚动
            navbar.classList.remove('navbar-hidden');
        }
        
        lastScrollTop = scrollTop;
    });
}

/**
 * 初始化返回顶部按钮功能
 */
function initBackToTop() {
    // 如果没有返回顶部按钮，创建一个
    let backToTopBtn = document.getElementById('back-to-top');
    
    if (!backToTopBtn) {
        backToTopBtn = document.createElement('button');
        backToTopBtn.id = 'back-to-top';
        backToTopBtn.className = 'back-to-top-btn';
        backToTopBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 15l-6-6-6 6"/></svg>';
        backToTopBtn.ariaLabel = '返回顶部';
        document.body.appendChild(backToTopBtn);
        
        // 添加样式
        const style = document.createElement('style');
        style.textContent = `
            .back-to-top-btn {
                position: fixed;
                bottom: 2rem;
                right: 2rem;
                width: 3rem;
                height: 3rem;
                border-radius: 50%;
                background-color: var(--color-primary, #667eea);
                color: white;
                border: none;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                z-index: 100;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                opacity: 0;
                transform: translateY(20px);
                transition: all 0.3s ease;
            }
            
            .back-to-top-btn.visible {
                opacity: 1;
                transform: translateY(0);
            }
            
            .back-to-top-btn:hover {
                background-color: var(--color-primary-dark, #5a67d8);
                transform: translateY(-3px);
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
            }
            
            .back-to-top-btn:active {
                transform: translateY(0);
            }
        `;
        document.head.appendChild(style);
    }
    
    // 添加点击事件
    backToTopBtn.addEventListener('click', function() {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });
    
    // 监听滚动事件，显示/隐藏按钮
    window.addEventListener('scroll', function() {
        if (window.scrollY > 300) {
            backToTopBtn.classList.add('visible');
        } else {
            backToTopBtn.classList.remove('visible');
        }
    });
}

/**
 * 关闭响应式侧边栏
 */
export function closeSidebar() {
    const sidebar = document.querySelector('.sidebar');
    const overlay = document.querySelector('.overlay');
    const menuToggle = document.querySelector('.menu-toggle');
    
    if (sidebar && sidebar.classList.contains('sidebar-active')) {
        sidebar.classList.remove('sidebar-active');
        document.body.classList.remove('sidebar-open');
    }
    
    if (overlay) {
        overlay.classList.remove('active');
    }
    
    if (menuToggle) {
        menuToggle.classList.remove('active');
    }
}